<template>
  <div class="recruitment-page">
    <div class="page-header">
      <h2>招聘管理</h2>
      <div class="header-actions">
        <el-button type="primary" icon="Plus" @click="showAddDialog = true">发布职位</el-button>
        <el-button icon="Download">导出</el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8f4ff">
            <el-icon color="#409eff" :size="24"><Briefcase /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalPositions }}</div>
            <div class="stat-label">在招职位</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff5e8">
            <el-icon color="#fa8c16" :size="24"><User /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalCandidates }}</div>
            <div class="stat-label">候选人总数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8fff3">
            <el-icon color="#52c41a" :size="24"><CircleCheck /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.interviewing }}</div>
            <div class="stat-label">面试中</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff0f0">
            <el-icon color="#ff4d4f" :size="24"><InfoFilled /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.offered }}</div>
            <div class="stat-label">已发Offer</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 搜索和筛选 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm">
        <el-form-item label="职位名称">
          <el-input v-model="filterForm.position" placeholder="请输入职位名称" clearable />
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="filterForm.department" placeholder="请选择部门" clearable>
            <el-option label="技术部" value="tech" />
            <el-option label="销售部" value="sales" />
            <el-option label="市场部" value="marketing" />
            <el-option label="人力资源部" value="hr" />
            <el-option label="财务部" value="finance" />
          </el-select>
        </el-form-item>
        <el-form-item label="招聘状态">
          <el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
            <el-option label="招聘中" value="active" />
            <el-option label="已暂停" value="paused" />
            <el-option label="已完成" value="completed" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
          <el-button icon="Refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 招聘职位列表 -->
    <el-card class="table-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="在招职位" name="positions">
          <el-table :data="positionList" stripe>
            <el-table-column prop="positionName" label="职位名称" width="200" />
            <el-table-column prop="department" label="部门" width="120" />
            <el-table-column prop="recruitCount" label="招聘人数" width="100" align="center">
              <template #default="{ row }">
                <el-tag type="primary">{{ row.recruitCount }}人</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="candidateCount" label="候选人" width="100" align="center" />
            <el-table-column prop="salary" label="薪资范围" width="150" />
            <el-table-column prop="workLocation" label="工作地点" width="120" />
            <el-table-column prop="publishDate" label="发布日期" width="120" />
            <el-table-column prop="status" label="状态" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">{{ row.statusText }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="280">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewCandidates(row)">候选人</el-button>
                <el-button link type="primary" @click="editPosition(row)">编辑</el-button>
                <el-button link type="warning" @click="toggleStatus(row)">{{ row.status === 'active' ? '暂停' : '激活' }}</el-button>
                <el-button link type="danger" @click="deletePosition(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="候选人管理" name="candidates">
          <el-table :data="candidateList" stripe>
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="gender" label="性别" width="80" align="center" />
            <el-table-column prop="age" label="年龄" width="80" align="center" />
            <el-table-column prop="position" label="应聘职位" width="150" />
            <el-table-column prop="phone" label="联系电话" width="130" />
            <el-table-column prop="email" label="邮箱" width="180" />
            <el-table-column prop="education" label="学历" width="100" />
            <el-table-column prop="experience" label="工作经验" width="100" />
            <el-table-column prop="stage" label="招聘阶段" width="120" align="center">
              <template #default="{ row }">
                <el-tag :type="getStageType(row.stage)">{{ row.stageText }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="applyDate" label="申请日期" width="120" />
            <el-table-column label="操作" fixed="right" width="240">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewResume(row)">查看简历</el-button>
                <el-button link type="success" @click="arrangeInterview(row)">安排面试</el-button>
                <el-button link type="warning" @click="updateStage(row)">更新阶段</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="面试安排" name="interviews">
          <el-table :data="interviewList" stripe>
            <el-table-column prop="candidateName" label="候选人" width="120" />
            <el-table-column prop="position" label="职位" width="150" />
            <el-table-column prop="interviewDate" label="面试日期" width="120" />
            <el-table-column prop="interviewTime" label="面试时间" width="120" />
            <el-table-column prop="interviewType" label="面试类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ row.interviewType }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="interviewer" label="面试官" width="120" />
            <el-table-column prop="location" label="面试地点" width="150" />
            <el-table-column prop="status" label="状态" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getInterviewStatusType(row.status)">{{ row.statusText }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewInterview(row)">详情</el-button>
                <el-button link type="success" @click="completeInterview(row)">完成面试</el-button>
                <el-button link type="warning" @click="reschedule(row)">改期</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑职位对话框 -->
    <el-dialog
      v-model="showAddDialog"
      :title="dialogTitle"
      width="700px"
    >
      <el-form :model="positionForm" :rules="rules" ref="positionFormRef" label-width="100px">
        <el-form-item label="职位名称" prop="positionName">
          <el-input v-model="positionForm.positionName" placeholder="请输入职位名称" />
        </el-form-item>
        <el-form-item label="所属部门" prop="department">
          <el-select v-model="positionForm.department" placeholder="请选择部门">
            <el-option label="技术部" value="tech" />
            <el-option label="销售部" value="sales" />
            <el-option label="市场部" value="marketing" />
            <el-option label="人力资源部" value="hr" />
            <el-option label="财务部" value="finance" />
          </el-select>
        </el-form-item>
        <el-form-item label="招聘人数" prop="recruitCount">
          <el-input-number v-model="positionForm.recruitCount" :min="1" :max="100" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="最低薪资" prop="minSalary">
              <el-input-number v-model="positionForm.minSalary" :min="0" :step="1000" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最高薪资" prop="maxSalary">
              <el-input-number v-model="positionForm.maxSalary" :min="0" :step="1000" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="工作地点" prop="workLocation">
          <el-input v-model="positionForm.workLocation" placeholder="请输入工作地点" />
        </el-form-item>
        <el-form-item label="学历要求" prop="education">
          <el-select v-model="positionForm.education" placeholder="请选择学历要求">
            <el-option label="不限" value="none" />
            <el-option label="大专" value="college" />
            <el-option label="本科" value="bachelor" />
            <el-option label="硕士" value="master" />
            <el-option label="博士" value="doctor" />
          </el-select>
        </el-form-item>
        <el-form-item label="工作经验" prop="experience">
          <el-select v-model="positionForm.experience" placeholder="请选择经验要求">
            <el-option label="不限" value="none" />
            <el-option label="应届生" value="fresh" />
            <el-option label="1-3年" value="1-3" />
            <el-option label="3-5年" value="3-5" />
            <el-option label="5-10年" value="5-10" />
            <el-option label="10年以上" value="10+" />
          </el-select>
        </el-form-item>
        <el-form-item label="职位描述" prop="description">
          <el-input
            v-model="positionForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入职位描述"
          />
        </el-form-item>
        <el-form-item label="岗位职责" prop="responsibilities">
          <el-input
            v-model="positionForm.responsibilities"
            type="textarea"
            :rows="4"
            placeholder="请输入岗位职责"
          />
        </el-form-item>
        <el-form-item label="任职要求" prop="requirements">
          <el-input
            v-model="positionForm.requirements"
            type="textarea"
            :rows="4"
            placeholder="请输入任职要求"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 统计数据
const stats = reactive({
  totalPositions: 25,
  totalCandidates: 156,
  interviewing: 42,
  offered: 8
})

// 筛选表单
const filterForm = reactive({
  position: '',
  department: '',
  status: ''
})

// 当前标签页
const activeTab = ref('positions')

// 职位列表
const positionList = ref([
  {
    id: 1,
    positionName: '高级前端工程师',
    department: '技术部',
    recruitCount: 2,
    candidateCount: 15,
    salary: '15K-25K',
    workLocation: '上海',
    publishDate: '2025-01-15',
    status: 'active',
    statusText: '招聘中'
  },
  {
    id: 2,
    positionName: 'Java开发工程师',
    department: '技术部',
    recruitCount: 3,
    candidateCount: 28,
    salary: '12K-20K',
    workLocation: '北京',
    publishDate: '2025-01-10',
    status: 'active',
    statusText: '招聘中'
  },
  {
    id: 3,
    positionName: '产品经理',
    department: '产品部',
    recruitCount: 1,
    candidateCount: 22,
    salary: '18K-30K',
    workLocation: '深圳',
    publishDate: '2025-01-08',
    status: 'active',
    statusText: '招聘中'
  },
  {
    id: 4,
    positionName: 'UI设计师',
    department: '设计部',
    recruitCount: 2,
    candidateCount: 18,
    salary: '10K-18K',
    workLocation: '杭州',
    publishDate: '2025-01-05',
    status: 'paused',
    statusText: '已暂停'
  }
])

// 候选人列表
const candidateList = ref([
  {
    id: 1,
    name: '张三',
    gender: '男',
    age: 28,
    position: '高级前端工程师',
    phone: '13800138001',
    email: 'zhangsan@example.com',
    education: '本科',
    experience: '5年',
    stage: 'interview',
    stageText: '面试中',
    applyDate: '2025-01-20'
  },
  {
    id: 2,
    name: '李四',
    gender: '女',
    age: 25,
    position: 'Java开发工程师',
    phone: '13800138002',
    email: 'lisi@example.com',
    education: '硕士',
    experience: '3年',
    stage: 'resume',
    stageText: '简历筛选',
    applyDate: '2025-01-18'
  },
  {
    id: 3,
    name: '王五',
    gender: '男',
    age: 30,
    position: '产品经理',
    phone: '13800138003',
    email: 'wangwu@example.com',
    education: '本科',
    experience: '7年',
    stage: 'offer',
    stageText: '已发Offer',
    applyDate: '2025-01-15'
  }
])

// 面试列表
const interviewList = ref([
  {
    id: 1,
    candidateName: '张三',
    position: '高级前端工程师',
    interviewDate: '2025-01-25',
    interviewTime: '14:00-15:00',
    interviewType: '技术面试',
    interviewer: '李经理',
    location: '会议室A',
    status: 'scheduled',
    statusText: '已安排'
  },
  {
    id: 2,
    candidateName: '赵六',
    position: 'Java开发工程师',
    interviewDate: '2025-01-26',
    interviewTime: '10:00-11:00',
    interviewType: '初试',
    interviewer: '王总监',
    location: '会议室B',
    status: 'scheduled',
    statusText: '已安排'
  }
])

// 对话框
const showAddDialog = ref(false)
const dialogTitle = computed(() => positionForm.id ? '编辑职位' : '发布职位')
const positionFormRef = ref(null)

// 职位表单
const positionForm = reactive({
  id: null,
  positionName: '',
  department: '',
  recruitCount: 1,
  minSalary: 0,
  maxSalary: 0,
  workLocation: '',
  education: '',
  experience: '',
  description: '',
  responsibilities: '',
  requirements: ''
})

// 表单验证规则
const rules = {
  positionName: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
  department: [{ required: true, message: '请选择部门', trigger: 'change' }],
  recruitCount: [{ required: true, message: '请输入招聘人数', trigger: 'blur' }]
}

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 获取状态类型
const getStatusType = (status) => {
  const types = {
    active: 'success',
    paused: 'warning',
    completed: 'info'
  }
  return types[status] || 'info'
}

// 获取阶段类型
const getStageType = (stage) => {
  const types = {
    resume: 'info',
    interview: 'warning',
    offer: 'success',
    rejected: 'danger'
  }
  return types[stage] || 'info'
}

// 获取面试状态类型
const getInterviewStatusType = (status) => {
  const types = {
    scheduled: 'primary',
    completed: 'success',
    cancelled: 'danger'
  }
  return types[status] || 'info'
}

// 搜索
const handleSearch = () => {
  console.log('搜索', filterForm)
  ElMessage.success('搜索成功')
}

// 重置
const handleReset = () => {
  Object.keys(filterForm).forEach(key => {
    filterForm[key] = ''
  })
  ElMessage.success('已重置')
}

// 切换标签页
const handleTabClick = (tab) => {
  console.log('切换到', tab.props.name)
}

// 查看候选人
const viewCandidates = (row) => {
  console.log('查看候选人', row)
  activeTab.value = 'candidates'
}

// 编辑职位
const editPosition = (row) => {
  Object.assign(positionForm, row)
  showAddDialog.value = true
}

// 切换状态
const toggleStatus = (row) => {
  const action = row.status === 'active' ? '暂停' : '激活'
  ElMessageBox.confirm(`确定要${action}该职位吗？`, '提示', {
    type: 'warning'
  }).then(() => {
    row.status = row.status === 'active' ? 'paused' : 'active'
    row.statusText = row.status === 'active' ? '招聘中' : '已暂停'
    ElMessage.success(`${action}成功`)
  }).catch(() => {})
}

// 删除职位
const deletePosition = (row) => {
  ElMessageBox.confirm('确定要删除该职位吗？', '提示', {
    type: 'warning'
  }).then(() => {
    const index = positionList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      positionList.value.splice(index, 1)
    }
    ElMessage.success('删除成功')
  }).catch(() => {})
}

// 查看简历
const viewResume = (row) => {
  console.log('查看简历', row)
  ElMessage.info('查看简历功能')
}

// 安排面试
const arrangeInterview = (row) => {
  console.log('安排面试', row)
  ElMessage.success('面试安排成功')
}

// 更新阶段
const updateStage = (row) => {
  console.log('更新阶段', row)
  ElMessage.success('阶段更新成功')
}

// 查看面试详情
const viewInterview = (row) => {
  console.log('查看面试详情', row)
  ElMessage.info('查看面试详情')
}

// 完成面试
const completeInterview = (row) => {
  console.log('完成面试', row)
  ElMessage.success('面试已完成')
}

// 改期
const reschedule = (row) => {
  console.log('改期', row)
  ElMessage.success('改期成功')
}

// 提交表单
const handleSubmit = () => {
  positionFormRef.value.validate((valid) => {
    if (valid) {
      console.log('提交表单', positionForm)
      ElMessage.success('保存成功')
      showAddDialog.value = false
    }
  })
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  console.log('每页', val, '条')
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  console.log('当前页', val)
}
</script>

<style scoped lang="scss">
.recruitment-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
  }
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
  }

  .stat-content {
    flex: 1;

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 14px;
      color: #909399;
    }
  }
}

.filter-card {
  margin-bottom: 20px;
}

.table-card {
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>

